<template>
  <NavigationVue />
  <div
    class="max-w-screen-xl mx-auto xl:mt-4 h-[100%] grid sm:grid-cols-1 md:grid-cols-1 sm:mb-10"
  >
    <RecycleScroller
      @scroll="ScrollList"
      listClass="max-w-screen-xl lg:ml-12 mx-auto mr-1 h-[10vh] overflow-y-scroll"
      class="scroller overflow-x-hidden"
      :emitUpdate="true"
      :items="useCardListStore.photoData"
      :itemSize="computeditemSize"
      @scroll-end="scrollEnd"
      :gridItems="computedWindowWidth"
      v-slot="{ item }"
      :keyField="useCardListStore.photoData.id"
    >
      <ListItemVue :item="{ item, computeditemSize }" />
    </RecycleScroller>
    <My-showPhoto v-show="useCardListStore.renderValue.show" />
  </div>
</template>

<script setup>
import ListItemVue from './item.vue'
import NavigationVue from '../navigation/index.vue'
import useCardList from '@/store/CardList/index.js'
import useNavigation from '@/store/navigation/index.js'
import useUser from '@/store/user/index.js'
import { computed, ref, watch, onBeforeMount, onBeforeUnmount } from 'vue'
import { MAX_RELOAD_TIMES } from '@/constants/index.js'
import { isMobile } from '@/utils/flexible.js'
import { useWindowSize } from '@vueuse/core'
const useCardListStore = useCardList()
//计算item在不同屏幕下的列数
const computedWindowWidth = computed(() => {
  return window.innerWidth < 768 ? 2 : 4
})
//计算item在不同屏幕下的高度
const computeditemSize = computed(() => {
  return window.innerWidth < 768 ? 300 : 280 // 确保返回数值而不是字符串
})
watch(isMobile, (newVal) => {
  const TOTAL = window.localStorage.getItem('MAX_RELOAD_TIMES')
  if (TOTAL < MAX_RELOAD_TIMES) {
    window.localStorage.setItem('MAX_RELOAD_TIMES', TOTAL + 1)
    window.location.reload()
  }
})

onBeforeMount(() => {
  console.log('组件被挂载')
})
onBeforeUnmount(() => {
  console.log('组件被卸载')
})
//监听页面拖拽事件
const { width, height } = useWindowSize()
watch(width, (newVal) => {
  if (newVal < 768) {
    window.location.reload()
  }
})

//初次数据
useCardListStore.getCurrentPageData()
const useNavigationStore = useNavigation()
const ScrollList = () => {
  useNavigationStore.isOpenNavigation = false
}
//获取用户点赞文章 动态渲染button
const useUserStore = useUser()
useUserStore.getUserLikes()
//所有数据加载完毕
const scrollEnd = () => {
  useCardListStore.getCurrentPageData()
}
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.scroller {
  height: 100%;
  overflow-y: auto;
}
</style>
